/* eslint-disable react/display-name */
import React from 'react'
import { Button } from 'antd'
import { Link } from 'dva/router'
import Header from '../../components/Header/index'
import styles from './RolePermission.less'
import propTypes from 'prop-types'
import gql from 'graphql-tag'
import { connect } from 'dva'
import { GQL as AGQL } from '../../components/GQL'
import CustomTable from './components/CustomTable'

const headerData = {
  title: '角色权限',
  hasPopover: true,
  popoverContent: '每个角色可以设置不同的后台功能权限，比如：业务员角色，仓库管理员角色，财务角色。然后账号关联某个角色，就拥有该角色下的所有功能权限',
  hasSubNav: true,
  subNavItem: [
    {
      title: '首页',
      link: true
    },
    {
      title: '系统',
      link: false
    },
    {
      title: '账号管理',
      link: true
    }
  ]
}

function RolePermission ({ loading, data, refetch }) {
  const { permissionGroups = [] } = data
  return (
    <div>
      <div>
        <Header header={headerData} />
      </div>
      <div>
        <div className={styles.wrap}>
          <Link to='/RolePermission/EditRole'>
            <Button type='primary' className={styles.Btn}>新增权限</Button>
          </Link>
        </div>
      </div>
      <CustomTable refetch={refetch} loading={loading} pagination={false} dataSource={permissionGroups} />
    </div>
  )
}

RolePermission.propTypes = {
  loading: propTypes.bool,
  data: propTypes.object,
  dispatch: propTypes.func,
  refetch: propTypes.func
}

const mapStateToProps = ({ rolePermission }) => ({ rolePermission })

export default AGQL({
  query: gql`
    query{
      permissionGroups{
        isAdministrator
        groupName
        ruleGroupNames
        updateDate
        groupId
      }
    }
<<<<<<< HEAD
  }
  `
=======
  `,
  fetchPolicy: 'no-cache',
  notifyOnNetworkStatusChange: true
>>>>>>> fc2c470a65caaf4a33139f211d74ad0ac15ba1de
})(connect(mapStateToProps)(RolePermission))
